<template>
	<div class="add-update-preview">
		<el-form
			class="add-update-form"
			ref="ruleForm"
			:model="ruleForm"
			:rules="rules"
			label-width="180px"
			>
			<el-form-item class="add-item" label="小区名称" prop="xiaoqumingcheng">
				<el-input v-model="ruleForm.xiaoqumingcheng" 
					placeholder="小区名称" clearable :disabled=" false  ||ro.xiaoqumingcheng"></el-input>
			</el-form-item>
			<el-form-item class="add-item" label="小区地址" prop="xiaoqudizhi">
				<el-input v-model="ruleForm.xiaoqudizhi" 
					placeholder="小区地址" clearable :disabled=" false  ||ro.xiaoqudizhi"></el-input>
			</el-form-item>
			<el-form-item class="add-item" label="房屋名称" prop="fangwumingcheng">
				<el-input v-model="ruleForm.fangwumingcheng" 
					placeholder="房屋名称" clearable :disabled=" false  ||ro.fangwumingcheng"></el-input>
			</el-form-item>
			<el-form-item class="add-item" label="房屋类型" prop="fangwuleixing">
				<el-input v-model="ruleForm.fangwuleixing" 
					placeholder="房屋类型" clearable :disabled=" false  ||ro.fangwuleixing"></el-input>
			</el-form-item>
			<el-form-item class="add-item" label="房屋图片" v-if="type!='cross' || (type=='cross' && !ro.fangwutupian)" prop="fangwutupian">
				<file-upload
					tip="点击上传房屋图片"
					action="file/upload"
					:limit="3"
					:multiple="true"
					:fileUrls="ruleForm.fangwutupian?ruleForm.fangwutupian:''"
					@change="fangwutupianUploadChange"
					></file-upload>
			</el-form-item>
			<el-form-item class="add-item" v-else label="房屋图片" prop="fangwutupian">
				<img v-if="ruleForm.fangwutupian.substring(0,4)=='http'" class="upload-img" v-bind:key="index" :src="ruleForm.fangwutupian.split(',')[0]">
				<img v-else class="upload-img" v-bind:key="index" v-for="(item,index) in ruleForm.fangwutupian.split(',')" :src="baseUrl+item">
			</el-form-item>
			<el-form-item class="add-item" label="电子合同" prop="dianzihetong">
				<file-upload
					tip="点击上传电子合同"
					action="file/upload"
					:limit="1"
					:type="3"
					:multiple="true"
					:fileUrls="ruleForm.dianzihetong?ruleForm.dianzihetong:''"
					@change="dianzihetongUploadChange"
					></file-upload>
			</el-form-item>  
			<el-form-item class="add-item" label="房屋面积" prop="fangwumianji">
				<el-input v-model="ruleForm.fangwumianji" 
					placeholder="房屋面积" clearable :disabled=" false  ||ro.fangwumianji"></el-input>
			</el-form-item>
			<el-form-item class="add-item" label="房屋楼层" prop="fangwulouceng">
				<el-input v-model="ruleForm.fangwulouceng" 
					placeholder="房屋楼层" clearable :disabled=" false  ||ro.fangwulouceng"></el-input>
			</el-form-item>
			<el-form-item class="add-item" label="押金" prop="yajin">
				<el-input-number v-model="ruleForm.yajin" placeholder="押金" :disabled="true ||ro.yajin"></el-input-number>
			</el-form-item>
			<el-form-item class="add-item" label="租房价格元/月" prop="zufangjiage">
				<el-input-number v-model="ruleForm.zufangjiage" placeholder="租房价格元/月" :disabled="true ||ro.zufangjiage"></el-input-number>
			</el-form-item>
			<el-form-item class="add-item" label="房东账号" prop="fangdongzhanghao">
				<el-input v-model="ruleForm.fangdongzhanghao" 
					placeholder="房东账号" clearable :disabled=" false  ||ro.fangdongzhanghao"></el-input>
			</el-form-item>
			<el-form-item class="add-item" label="房东姓名" prop="fangdongxingming">
				<el-input v-model="ruleForm.fangdongxingming" 
					placeholder="房东姓名" clearable :disabled=" false  ||ro.fangdongxingming"></el-input>
			</el-form-item>
			<el-form-item class="add-item" label="联系电话" prop="lianxidianhua">
				<el-input v-model="ruleForm.lianxidianhua" 
					placeholder="联系电话" clearable :disabled=" false  ||ro.lianxidianhua"></el-input>
			</el-form-item>
			<el-form-item class="add-item" label="用户账号" prop="yonghuzhanghao">
				<el-input v-model="ruleForm.yonghuzhanghao" 
					placeholder="用户账号" clearable :disabled=" false  ||ro.yonghuzhanghao"></el-input>
			</el-form-item>
			<el-form-item class="add-item" label="用户姓名" prop="yonghuxingming">
				<el-input v-model="ruleForm.yonghuxingming" 
					placeholder="用户姓名" clearable :disabled=" false  ||ro.yonghuxingming"></el-input>
			</el-form-item>
			<el-form-item class="add-item" label="手机号码" prop="shoujihaoma">
				<el-input v-model="ruleForm.shoujihaoma" 
					placeholder="手机号码" clearable :disabled=" false  ||ro.shoujihaoma"></el-input>
			</el-form-item>
			<el-form-item class="add-item" label="发布时间" prop="fabushijian">
				<el-date-picker
					:disabled=" false  ||ro.fabushijian"
					format="yyyy 年 MM 月 dd 日"
					value-format="yyyy-MM-dd"
					v-model="ruleForm.fabushijian" 
					type="date"
					placeholder="发布时间">
				</el-date-picker> 
			</el-form-item>
			<el-form-item class="add-item" label="纠纷内容" prop="jiufenneirong">
				<editor 
					v-model="ruleForm.jiufenneirong" 
					class="editor" 
					myQuillEditor="jiufenneirong"
					action="file/upload">
				</editor>
			</el-form-item>

			<el-form-item class="add-btn-item">
				<el-button class="submitBtn"  type="primary" @click="onSubmit">
					<span class="icon iconfont icon-kaitongfuwu"></span>
					<span class="text">确定</span>
				</el-button>
				<el-button class="closeBtn" @click="back()">
					<span class="icon iconfont icon-shanchu1"></span>
					<span class="text">取消</span>
				</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				baseUrl: '',
				ro:{
					xiaoqumingcheng : false,
					xiaoqudizhi : false,
					fangwumingcheng : false,
					fangwuleixing : false,
					fangwutupian : false,
					dianzihetong : false,
					fangwumianji : false,
					fangwulouceng : false,
					yajin : false,
					zufangjiage : false,
					fangdongzhanghao : false,
					fangdongxingming : false,
					lianxidianhua : false,
					yonghuzhanghao : false,
					yonghuxingming : false,
					shoujihaoma : false,
					fabushijian : false,
					jiufenneirong : false,
				},
				type: '',
				userTableName: localStorage.getItem('UserTableName'),
				ruleForm: {
					xiaoqumingcheng: '',
					xiaoqudizhi: '',
					fangwumingcheng: '',
					fangwuleixing: '',
					fangwutupian: '',
					dianzihetong: '',
					fangwumianji: '',
					fangwulouceng: '',
					yajin: '',
					zufangjiage: '',
					fangdongzhanghao: '',
					fangdongxingming: '',
					lianxidianhua: '',
					yonghuzhanghao: '',
					yonghuxingming: '',
					shoujihaoma: '',
					fabushijian: '',
					jiufenneirong: '',
				},


				rules: {
					xiaoqumingcheng: [
					],
					xiaoqudizhi: [
					],
					fangwumingcheng: [
					],
					fangwuleixing: [
					],
					fangwutupian: [
					],
					dianzihetong: [
					],
					fangwumianji: [
					],
					fangwulouceng: [
					],
					yajin: [
						{ validator: this.$validate.isNumber, trigger: 'blur' },
					],
					zufangjiage: [
						{ validator: this.$validate.isNumber, trigger: 'blur' },
					],
					fangdongzhanghao: [
					],
					fangdongxingming: [
					],
					lianxidianhua: [
					],
					yonghuzhanghao: [
					],
					yonghuxingming: [
					],
					shoujihaoma: [
					],
					fabushijian: [
					],
					jiufenneirong: [
					],
				},
				centerType: false,
			};
		},
		computed: {



		},
		components: {
		},
		created() {
			if(this.$route.query.centerType){
				this.centerType = true
			}
			//this.bg();
			let type = this.$route.query.type ? this.$route.query.type : '';
			this.init(type);
			this.baseUrl = this.$config.baseUrl;
			this.ruleForm.fabushijian = this.getCurDate()
		},
		methods: {
			getMakeZero(s) {
				return s < 10 ? '0' + s : s;
			},
			// 下载
			download(file){
				window.open(`${file}`)
			},
			// 初始化
			init(type) {
				this.type = type;
				if(type=='cross'){
					var obj = JSON.parse(localStorage.getItem('crossObj'));
					for (var o in obj){
						if(o=='xiaoqumingcheng'){
							this.ruleForm.xiaoqumingcheng = obj[o];
							this.ro.xiaoqumingcheng = true;
							continue;
						}
						if(o=='xiaoqudizhi'){
							this.ruleForm.xiaoqudizhi = obj[o];
							this.ro.xiaoqudizhi = true;
							continue;
						}
						if(o=='fangwumingcheng'){
							this.ruleForm.fangwumingcheng = obj[o];
							this.ro.fangwumingcheng = true;
							continue;
						}
						if(o=='fangwuleixing'){
							this.ruleForm.fangwuleixing = obj[o];
							this.ro.fangwuleixing = true;
							continue;
						}
						if(o=='fangwutupian'){
							this.ruleForm.fangwutupian = obj[o]?obj[o].split(",")[0]:'';
							this.ro.fangwutupian = true;
							continue;
						}
						if(o=='dianzihetong'){
							this.ruleForm.dianzihetong = obj[o];
							this.ro.dianzihetong = true;
							continue;
						}
						if(o=='fangwumianji'){
							this.ruleForm.fangwumianji = obj[o];
							this.ro.fangwumianji = true;
							continue;
						}
						if(o=='fangwulouceng'){
							this.ruleForm.fangwulouceng = obj[o];
							this.ro.fangwulouceng = true;
							continue;
						}
						if(o=='yajin'){
							this.ruleForm.yajin = obj[o];
							this.ro.yajin = true;
							continue;
						}
						if(o=='zufangjiage'){
							this.ruleForm.zufangjiage = obj[o];
							this.ro.zufangjiage = true;
							continue;
						}
						if(o=='fangdongzhanghao'){
							this.ruleForm.fangdongzhanghao = obj[o];
							this.ro.fangdongzhanghao = true;
							continue;
						}
						if(o=='fangdongxingming'){
							this.ruleForm.fangdongxingming = obj[o];
							this.ro.fangdongxingming = true;
							continue;
						}
						if(o=='lianxidianhua'){
							this.ruleForm.lianxidianhua = obj[o];
							this.ro.lianxidianhua = true;
							continue;
						}
						if(o=='yonghuzhanghao'){
							this.ruleForm.yonghuzhanghao = obj[o];
							this.ro.yonghuzhanghao = true;
							continue;
						}
						if(o=='yonghuxingming'){
							this.ruleForm.yonghuxingming = obj[o];
							this.ro.yonghuxingming = true;
							continue;
						}
						if(o=='shoujihaoma'){
							this.ruleForm.shoujihaoma = obj[o];
							this.ro.shoujihaoma = true;
							continue;
						}
						if(o=='fabushijian'){
							this.ruleForm.fabushijian = obj[o];
							this.ro.fabushijian = true;
							continue;
						}
						if(o=='jiufenneirong'){
							this.ruleForm.jiufenneirong = obj[o];
							this.ro.jiufenneirong = true;
							continue;
						}
					}
				}else if(type=='edit'){
					this.info()
				}
				// 获取用户信息
				this.$http.get(this.userTableName + '/session', {emulateJSON: true}).then(res => {
					if (res.data.code == 0) {
						var json = res.data.data;
						if((json.yonghuzhanghao!=''&&json.yonghuzhanghao) || json.yonghuzhanghao==0){
							this.ruleForm.yonghuzhanghao = json.yonghuzhanghao;
							this.ro.yonghuzhanghao = true;
						}
						if((json.yonghuxingming!=''&&json.yonghuxingming) || json.yonghuxingming==0){
							this.ruleForm.yonghuxingming = json.yonghuxingming;
							this.ro.yonghuxingming = true;
						}
						if((json.shoujihaoma!=''&&json.shoujihaoma) || json.shoujihaoma==0){
							this.ruleForm.shoujihaoma = json.shoujihaoma;
							this.ro.shoujihaoma = true;
						}
					}
				});

				if (localStorage.getItem('raffleType') && localStorage.getItem('raffleType') != null) {
					localStorage.removeItem('raffleType')
					setTimeout(() => {
						this.onSubmit()
					}, 300)
				}
			},

			// 多级联动参数
			// 多级联动参数
			info() {
				this.$http.get(`hetongjiufen/detail/${this.$route.query.id}`, {emulateJSON: true}).then(res => {
					if (res.data.code == 0) {
						this.ruleForm = res.data.data;
					}
				});
			},
			// 提交
			async onSubmit() {
				if(!this.ruleForm.id) {
					delete this.ruleForm.userid
				}
				await this.$refs["ruleForm"].validate(async valid => {
					if(valid) {
						if(this.type=='cross'){
							var statusColumnName = localStorage.getItem('statusColumnName');
							var statusColumnValue = localStorage.getItem('statusColumnValue');
							if(statusColumnName && statusColumnName!='') {
								var obj = JSON.parse(localStorage.getItem('crossObj'));
								if(!statusColumnName.startsWith("[")) {
									for (var o in obj){
										if(o==statusColumnName){
											obj[o] = statusColumnValue;
										}
									}
									var table = localStorage.getItem('crossTable');
									await this.$http.post(table+'/update', obj).then(res => {});
								}
							}
						}


						await this.$http.post(`hetongjiufen/${this.ruleForm.id?'update':this.centerType?'save':'add'}`, this.ruleForm).then(async res => {
							if (res.data.code == 0) {
								this.$message({
									message: '操作成功',
									type: 'success',
									duration: 1500,
									onClose: () => {
										this.$router.go(-1);
										
									}
								});
							} else {
								this.$message({
									message: res.data.msg,
									type: 'error',
									duration: 1500
								});
							}
						});
					}
				});
			},
			// 获取uuid
			getUUID () {
				return new Date().getTime();
			},
			// 返回
			back() {
				this.$router.go(-1);
			},
			fangwutupianUploadChange(fileUrls) {
				this.ruleForm.fangwutupian = fileUrls.replace(new RegExp(this.$config.baseUrl,"g"),"");
			},
			dianzihetongUploadChange(fileUrls) {
				this.ruleForm.dianzihetong = fileUrls.replace(new RegExp(this.$config.baseUrl,"g"),"");
			},
		}
	};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	.add-update-preview {
		padding: 0 0 20px;
		margin: 0px auto;
		color: #666;
		background: #fff;
		width: 1200px;
		font-size: 16px;
		position: relative;
		.add-update-form {
			margin: 20px 0 0;
			width: 100%;
			position: relative;
			.add-item.el-form-item {
				padding: 0 0 10px;
				margin: 0 0 10px;
				background: none;
				border-color: #ccc;
				border-width: 0 0 1px;
				border-style: dashed;
				/deep/ .el-form-item__label {
					padding: 0 10px 0 0;
					color: #000000;
					font-weight: 500;
					width: 180px;
					font-size: inherit;
					line-height: 40px;
					text-align: center;
				}
				/deep/ .el-form-item__content {
					margin-left: 180px;
				}
				.el-input {
					width: auto;
				}
				.el-input /deep/ .el-input__inner {
					border: 1px solid #ddd;
					border-radius: 0px;
					padding: 0 12px;
					box-shadow: none;
					color: inherit;
					width: auto;
					font-size: 16px;
					height: 40px;
				}
				.el-input /deep/ .el-input__inner[readonly="readonly"] {
					border: 0;
					cursor: not-allowed;
					border-radius: 0px;
					padding: 0 12px;
					box-shadow: none;
					color: rgba(85, 85, 127, 1.0);
					background: none;
					width: auto;
					font-size: 16px;
					height: 40px;
				}
				.el-input-number /deep/ .el-input__inner {
					text-align: left;
					border: 1px solid #ddd;
					border-radius: 0px;
					padding: 0 12px;
					box-shadow: none;
					color: inherit;
					width: auto;
					font-size: 16px;
					height: 40px;
				}
				.el-input-number /deep/ .is-disabled .el-input__inner {
					text-align: left;
					border: 0;
					cursor: not-allowed;
					border-radius: 0px;
					padding: 0 12px;
					box-shadow: none;
					color: rgba(85, 85, 127, 1.0);
					background: none;
					width: auto;
					font-size: 16px;
					height: 40px;
				}
				.el-input-number /deep/ .el-input-number__decrease {
					display: none;
				}
				.el-input-number /deep/ .el-input-number__increase {
					display: none;
				}
				.el-select {
					width: auto;
				}
				.el-select /deep/ .el-input__inner {
					border: 1px solid #ddd;
					border-radius: 0px;
					padding: 0 10px;
					color: inherit;
					width: 100%;
					font-size: 16px;
					min-width: inherit !important;
					height: 40px;
				}
				.el-select /deep/ .is-disabled .el-input__inner {
					border: 0;
					cursor: not-allowed;
					border-radius: 0px;
					padding: 0 10px;
					box-shadow: none;
					color: inherit;
					background: none;
					width: 100%;
					font-size: 16px;
					height: 40px;
				}
				.el-date-editor {
					width: auto;
				}
				.el-date-editor /deep/ .el-input__inner {
					border: 1px solid #ddd;
					border-radius: 0px;
					padding: 0 10px 0 30px;
					box-shadow: none;
					color: inherit;
					width: auto;
					font-size: 16px;
					height: 40px;
				}
				.el-date-editor /deep/ .el-input__inner[readonly="readonly"] {
					border: 0;
					cursor: not-allowed;
					border-radius: 0px;
					padding: 0 10px 0 30px;
					box-shadow: none;
					color: inherit;
					background: none;
					width: auto;
					font-size: 16px;
					height: 40px;
				}
				/deep/ .el-upload--picture-card {
					background: transparent;
					border: 0;
					border-radius: 0;
					width: auto;
					height: auto;
					line-height: initial;
					vertical-align: middle;
				}
				/deep/ .upload .upload-img {
					border: 1px solid #ddd;
					cursor: pointer;
					border-radius: 0px;
					color: #999;
					background: #fff;
					object-fit: cover;
					width: 80px;
					font-size: 26px;
					line-height: 60px;
					text-align: center;
					height: 60px;
				}
				/deep/ .el-upload-list .el-upload-list__item {
					border: 1px solid #ddd;
					cursor: pointer;
					border-radius: 0px;
					color: #999;
					background: #fff;
					object-fit: cover;
					width: 80px;
					font-size: 26px;
					line-height: 60px;
					text-align: center;
					height: 60px;
					font-size: 14px;
					line-height: 1.8;
				}
				/deep/ .el-upload .el-icon-plus {
					border: 1px solid #ddd;
					cursor: pointer;
					border-radius: 0px;
					color: #999;
					background: #fff;
					object-fit: cover;
					width: 80px;
					font-size: 26px;
					line-height: 60px;
					text-align: center;
					height: 60px;
				}
				/deep/ .el-upload__tip {
					color: #888;
					font-size: 16px;
				}
				.el-textarea /deep/ .el-textarea__inner {
					border: 1px solid #ddd;
					border-radius: 0px;
					padding: 12px;
					box-shadow: none;
					color: inherit;
					width: auto;
					font-size: 16px;
					min-height: 150px;
					min-width: 48%;
					height: auto;
				}
				.el-textarea /deep/ .el-textarea__inner[readonly="readonly"] {
					border: 0px solid #ddd;
					cursor: not-allowed;
					border-radius: 0px;
					padding: 12px;
					box-shadow: none;
					color: inherit;
					background: none;
					width: auto;
					font-size: 16px;
					min-height: 150px;
					min-width: 50%;
					height: auto;
				}
				/deep/ .el-input__inner::placeholder {
					color: #9E9E9E;
					font-size: inherit;
				}
				/deep/ textarea::placeholder {
					color: #9E9E9E;
					font-size: inherit;
				}
				.editor {
					background-color: #fff;
					border-radius: 0;
					padding: 0;
					box-shadow: none;
					margin: 0;
					width: 80%;
					min-height: 250px;
					border-color: #ccc;
					border-width: 1px;
					border-style: solid;
					height: auto;
				}
				.upload-img {
					object-fit: cover;
					width: 100px;
					height: 100px;
				}
				.viewBtn {
					border: 0;
					cursor: pointer;
					border-radius: 0px;
					padding: 0 20px;
					margin: 0;
					color: #333;
					background: #03abe930;
					display: inline-block;
					width: auto;
					font-size: 14px;
					line-height: 34px;
					height: 34px;
				}
				.viewBtn:hover {
				}
				.unviewBtn {
					border: 0;
					cursor: pointer;
					padding: 0 20px;
					margin: 0;
					color: #333;
					display: inline-block;
					font-size: 14px;
					line-height: 34px;
					border-radius: 0px;
					outline: none;
					background: #ddd;
					width: auto;
					height: 34px;
				}
				.unviewBtn:hover {
					background: #eee;
				}
			}
			.add-btn-item {
				padding: 0;
				margin: 30px 0;
				width: 100%;
				text-align: center;
				.submitBtn {
					border: 0;
					cursor: pointer;
					padding: 0 15px;
					margin: 0 20px 0 0;
					display: inline-block;
					font-size: 16px;
					line-height: 40px;
					border-radius: 2px;
					background: #66B9BB;
					width: auto;
					text-align: center;
					min-width: 120px;
					height: 40px;
					.icon {
						color: #fff;
					}
					.text {
						color: #fff;
					}
				}
				.submitBtn:hover {
					opacity: 0.8;
					.icon {
					}
					.text {
					}
				}
				.closeBtn {
					border: 0px solid #ddd;
					cursor: pointer;
					padding: 0 15px;
					margin: 0 100px 0 0;
					display: inline-block;
					font-size: 16px;
					line-height: 40px;
					border-radius: 2px;
					background: #858585;
					width: auto;
					text-align: center;
					min-width: 110px;
					height: 40px;
					.icon {
						color: #fff;
					}
					.text {
						color: #fff;
					}
				}
				.closeBtn:hover {
					opacity: 0.8;
					.icon {
					}
					.text {
					}
				}
			}
		}
	}
	.el-date-editor.el-input {
		width: auto;
	}
</style>
